import { App, InjectionKey } from "vue";
import Vuex, { createStore, Store, StoreOptions } from "vuex";
import { AppRouteModule } from "/@ts/router/types";
import router from "/@ts/router";
import { loginModule } from "/@ts/store/modules/login";
import { permissionsModule } from "/@ts/store/modules/permission";
import { RootState } from "/@ts/store/root-types";
import { SwitchColor } from "/@ts/hooks/theme";
import { MenuRouter } from "/@ts/router/routes";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { ROOT_PAGE_NAME, ROOT_ADMIN_PAGE_NAME } from "../router/constant";
import { icons } from "/@ts/components/icon/index";
// 定义 injection key
export const key: InjectionKey<Store<RootState>> = Symbol();
// 创建一个新的 store 实例 StoreOptions<RootState>
export interface Theme {
  themeNav: SwitchColor[];
  themeMenu: SwitchColor[];
}
export const theme: Theme = {
  themeNav: [
    {
      ColorFont: "#333",
      ColorBg: "#FFF",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#009688",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#383F45",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#394664",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#409EFF",
    },
  ],
  themeMenu: [
    {
      ColorFont: "#FFF",
      ColorBg: "#001529",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#23262E",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#383F45",
    },
    {
      ColorFont: "#FFF",
      ColorBg: "#394664",
    },
  ],
};
interface SysTheme {
  name: string;
  themeColor: Array<string>;
  themeNav: SwitchColor;
  activeColor: string;
  navTitleColorFont: string;
  themeMenu: SwitchColor;
}
export const sysThemeList: Array<SysTheme> = [
  {
    //系统默认 配色
    name: "系统默认",
    navTitleColorFont: "#FFF",
    themeColor: ["9", "96", "189"],
    themeNav: {
      ColorFont: "#333",
      ColorBg: "#FFF",
    },
    activeColor: "#FFF",
    themeMenu: {
      ColorFont: "#FFF",
      ColorBg: "#001529",
    },
  },
  {
    //系统默认 配色
    name: "护眼",
    navTitleColorFont: "#333",
    themeColor: ["039", "177", "153"],
    activeColor: "#FFF",
    themeNav: {
      ColorFont: "#333",
      ColorBg: "#FFF",
    },
    themeMenu: {
      ColorFont: "#606266",
      ColorBg: "#FFF",
    },
  },
];
export const themeColor: string[] = ["9", "96", "189"];
export const store: Store<RootState> = createStore({
  state() {
    return {
      icons: [],
      baseRouters: [], //路由列表 可前端写死,可后端返回
      navTitleColorFont: sysThemeList[0].navTitleColorFont,
      isFull: false, //是否通栏
      navIsTo: false, //导航栏是否顶部
      activeColor: "",
      projectName: "llt-admin", //项目标题
      BreadcrumbList: [], //面包屑
      tagPages: [], //导航标签页
      currentTag: 0, //当前选中的标签索引值
      menuActiveName: "/workbench", //当前菜单默认选中菜单
      refresh: false, //刷新状态 false 刷新结束
      themeCurrentMenuItem: theme.themeMenu[0],
      themeCurrentNavItem: theme.themeNav[0], //当前导航主题配色
      themeColor: themeColor, //这里的初始化的值与 init.scss HTML的值保持一直
    };
  },
  mutations: {
    setIcons(state: RootState, value: string[]) {
      state.icons = icons.concat(value);
    },
    setThemeColor(state: RootState, value: string[]) {
      state.themeColor = value;
      document.documentElement.style.setProperty("--color-red", value[0]);
      document.documentElement.style.setProperty("--color-green", value[1]);
      document.documentElement.style.setProperty("--color-blue", value[2]);
      localStorage.setItem("themeColor", JSON.stringify(value));
    },
    setIsFull(state: RootState, value: boolean) {
      state.isFull = value;
      localStorage.setItem("isFull", JSON.stringify(value));
    },
    setnavIsTo(state: RootState, value: boolean) {
      state.navIsTo = value;
      localStorage.setItem("navIsTo", JSON.stringify(value));
    },
    setThemeCurrentNavItem(state: RootState, value: SwitchColor) {
      state.themeCurrentNavItem = value;
      localStorage.setItem("themeNav", JSON.stringify(value));
    },
    setNavTitleColorFont(state: RootState, value: string) {
      state.navTitleColorFont = value;
      localStorage.setItem("navTitleColorFont", value);
    },
    setThemeCurrentMenuItem(state: RootState, value: SwitchColor) {
      state.themeCurrentMenuItem = value;
      localStorage.setItem("themeMenu", JSON.stringify(value));
    },
    setActiveColor(state: RootState, value: string) {
      state.activeColor = value;
      localStorage.setItem("activeColor", value);
    },
    setRefresh(state: RootState) {
      state.refresh = true;
      setTimeout(() => {
        state.refresh = false;
      }, 100);
    },
    setMenuActiveName(state: RootState, value: string) {
      state.menuActiveName = value;
    },
    setCurrentTag(state: RootState, value: number) {
      state.currentTag = value;
    },
    setBreadcrumbList(state: RootState, value: AppRouteModule[]) {
      state.BreadcrumbList = value;
    },
    setTagPages(state: RootState, value: AppRouteModule) {
      if (state.tagPages.some((v) => v.path == value.path)) {
        console.log("value.path:>> ", value.path);
        return;
      }
      state.tagPages.push(JSON.parse(JSON.stringify(value)));

      //刷新页面
      // store.commit("setRefresh")
    },
    setCloseTagPages(state: RootState, value: number) {
      state.tagPages.splice(value, 1);
      router.push(state.tagPages[state.tagPages.length - 1]);
    },
    //重新赋值标签页
    MoreCloseTagPages(state: RootState, value: AppRouteModule[]) {
      state.tagPages = value;
      let data = state.tagPages[state.tagPages.length - 1];
      router.push(data);
    },
  },
  actions: {
    initRoute({ commit, state }, value) {
      //调用这个说明刷新了

      return new Promise((resolve: any, reject: any) => {
        let data = [...MenuRouter];
        commit("setBaseRouters", data);
        // resolve('resolve')
      });
    },
  },
  modules: {
    loginModule,
    permissionsModule,
  },
});
/**
 * 挂载到vue实例函数
 * @param app vue实例
 */
export function setupStore(app: App<Element>) {
  app.use(store, key);
  let data = [];
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    let name = key.substring(0, 1).toLowerCase() + key.substring(1);
    data.push(name);
    app.component(key, component);
  }
  store.commit("setIcons", data);
}
